<template>
	<div class="ui-alert" :class="setshow?'show':''">
		<div class="ui-alert-content" ref="alert">
			<div class="ui-alert-title"  ref="dragTitle">
				<div class="t">{{title}}</div>
				<span class="ui-alert-close font" @click="hide" v-show="isshowclose">&#xe641;</span>
			</div>
			<div class="ui-alert-content2">{{msg}}</div>
			<div class="ui-alert-bottom">
				<ui-btn classname="ui-alert-btn" v-show="isshowenter" @click="enter">{{ btnText[0] }}</ui-btn>
				<ui-btn classname="ui-alert-btn" v-show="isshowcancel"  @click="cancel">{{ btnText[1] }}</ui-btn>
			</div>
		</div>
		<div class="ui-alert-bg"></div>
	</div>
</template>

<script>
	import btn from './ui_btn.vue';
	/*
	组件属性[
		title:标题
		msg:提示内容
		isshow:默认是否显示对话框
		isshowcancel:是否显示取消按钮
		isshowenter:是否显示确定按钮
		isshowclose:是否显示关闭按钮
		btnText:['确定按钮名称','取消按钮名称'] 修改按钮名称
	]
	组件事件[
		enter:点击确定触发，callback(obj[当前实例])
		cancel:点击取消触发，callback(obj[当前实例])
	]
	*/
	export default{
		props:{
			"title":{type:String,default:"对话框"},
			"msg":{type:String,default:""},
			"isshow":{type:Boolean,default:false},
			"isshowenter":{type:Boolean,default:true},
			"isshowcancel":{type:Boolean,default:false},
			"isshowclose":{type:Boolean,default:true},
			"btnText":{type:Array,default:['确定','取消']}
		},
		data(){
			return {
				uiType:"ui-alert",
			}
		},
		computed:{
			setshow(){
				if(this.isshow){
					this.setoffset();
				}
				return this.isshow;
			}
		},
		methods:{			
			show(msg,title){
				if(msg)this.msg=msg;
				if(title)this.title=title;
				this.isshow=true;
			},
			hide(){
				this.isshow=false;
			},
			setoffset(){
				let viewWidth=document.documentElement.clientWidth,viewHeight=document.documentElement.clientHeight;
				let is=true,self=this;
				let fors=setInterval(function(){
					if(self.$refs.alert){
						clearInterval(fors);
						let xy=self.$refs.alert.offset();
						let offset=[(viewWidth-xy.width)/2,(viewHeight-xy.height)/2-40];
						if(offset[0]<0)offset[0]=0;
						if(offset[1]<0)offset[1]=0;
						self.$refs.alert.style.left=offset[0]+"px"
						self.$refs.alert.style.top=offset[1]+"px"
					}
				});
			},
			enter(){
				this.$emit('enter',this);
				this.hide();
			},
			cancel(){
				this.$emit('cancel',this);
				this.hide();
			}
		},
		created(){
			let self=this;
			let fors=setInterval(function(){
				if(self.$refs.alert){
					clearInterval(fors);
					drag(self.$refs.alert,self.$refs.dragTitle);
				}
			});
		},
		components:{
			"ui-btn":btn
		}
	}
</script>

